<template>
    <div class="stockDetail">
        <!-- 动态表单 -->
        <dynamic-form :formDataList='formDataList' @getFormData='getFormData'></dynamic-form>

        <!-- 按钮操作 -->
        <custom-setbtn>
            <template #l_btn>
                <div class="l_btn">
                    <el-button type="primary" size="mini" icon="el-icon-upload2" plain 
                        :disabled='computedTotal' @click='getStockMsgExport'>导出
                    </el-button>
                </div>
            </template>
            <template #r_btn>
                <div class="r_btn">
                    <!-- 列配置表格 -->
                    <pop-checkbox :disposeGroup='disposeGroup' @handleChangeDiposeGroup='handleChangeDiposeGroup'></pop-checkbox>
                </div>
            </template>
        </custom-setbtn>

        <!-- 表格 -->
        <table-list :tableGroup='tableGroup' :searchForm='formDataList.searchForm' @getTotal='getTotal' ref='tableList'>
        </table-list>
    </div>
</template>

<script>
    import {
        productColumns
    } from '@/api/customFieldController'
    import tableList from './tableList.vue'
    import dynamicForm from '@/components/dynamicForm'
    export default {
        data() {
            return {
                isCollapse: false,
                formDataList: {
                    formGroup: [{
                            label: 'productCode',
                            name: '产品编号',
                            prop: '',
                            placeholder: '请输入',
                            key: 'srk',
                            defaultCode:''
                        },
                        {
                            label: 'productName',
                            name: '产品名称',
                            prop: '',
                            placeholder: '请输入',
                            key: 'srk',

                        },
                        {
                            label: 'productSpecification',
                            name: '产品规格',
                            prop: '',
                            key: 'srk',
                            placeholder: '请输入',
                        },
                        {
                            label: 'type',
                            name: '来源单据类型',
                            prop: '',
                            placeholder: '请选择',
                            key: 'sel',
                            node: {
                                default: [],
                                isRadio: false,
                                options: [{
                                        value: 0,
                                        label: '入库单'
                                    },
                                    {
                                        value: 1,
                                        label: '出库单'
                                    },
                                ]
                            }
                        },
                        {
                            label: 'code',
                            name: '来源单据编号',
                            prop: '',
                            placeholder: '请输入',
                            key: 'srk',
                        },
                        {
                            label: 'typeOther',
                            name: '库存类型',
                            prop: '',
                            placeholder: '请选择',
                            key: 'sel',
                            node: {
                                default: [],
                                isRadio: false,
                                options: [{
                                        value: '普通入库',
                                        label: '普通入库'
                                    },
                                    {
                                        value: '采购入库',
                                        label: '采购入库'
                                    },
                                    {
                                        value: '成品入库',
                                        label: '成品入库'
                                    },
                                    {
                                        value: '调拨入库',
                                        label: '调拨入库'
                                    },
                                    {
                                        value: '销售退货入库',
                                        label: '销售退货入库'
                                    },
                                    {
                                        value: '其它入库',
                                        label: '其它入库'
                                    },
                                    {
                                        value: '普通出库',
                                        label: '普通出库'
                                    },
                                    {
                                        value: '销售出库',
                                        label: '销售出库'
                                    },
                                    {
                                        value: '生产出库',
                                        label: '生产出库'
                                    },
                                    {
                                        value: '调拨出库',
                                        label: '调拨出库'
                                    },
                                    {
                                        value: '采购退货出库',
                                        label: '采购退货出库'
                                    },
                                    {
                                        value: '其它出库',
                                        label: '其它出库'
                                    },
                                ]
                            }
                        },
                        {
                            label: ['startTime', 'endTime'],
                            name: '库存收发时间',
                            prop: '',
                            key: 'cki'
                        },
                        {
                            label: 'comment',
                            name: '备注',
                            placeholder: '请输入',
                            prop: '',
                            key: 'srk'
                        },
                    ],
                    searchForm: {
                        productCode: '',
                        productName: '',
                        productSpecification: '',
                        type: [],
                        code: '',
                        typeOther: [],
                        startTime: '',
                        endTime: '',
                        comment: '',
                        page: 1,
                        limit: 10
                    },
                    formSet: true,
                    type:'stockMsg'
                },
                tableTotal:0,
                disposeGroup: [],
                tableGroup:[]
            }
        },
        components: {
            dynamicForm,
            tableList
        },
        computed:{
            computedTotal(){
                return this.tableTotal <= 0
            }
        },
        watch:{
            tableTotal(total){
                //当表格数据为空时 列配置和表头无自定义字段信息
                if(total <= 0) {
                    this.tableGroup = this.utils.filterCustomFields(this.tableGroup)
                    this.disposeGroup = this.utils.filterCustomFields(this.disposeGroup)
                }
            }
        },
        created(){
            const {code} = this.$route.query
            if(code) {
                const {formGroup,searchForm} = this.formDataList
                formGroup.find(i => i.label == 'productCode').defaultCode = code
                searchForm.productCode = code
            }
        },
        mounted() {
            this.getProductColumns({
                type: 'stockMsg'
            }).then(()=>{
                this.$refs.tableList.getStockMsg(this.formDataList.searchForm)
            })
        },
        methods: {
            getProductColumns: async function(data){
                const res = await productColumns(data)
                if (res.code == 200) {
                    this.disposeGroup = []
                    this.tableGroup = []
                    res.data.map((item, i) => {
                        const key = {
                                index:'80',
                                productSpecification:'80',
                                unit:'70',
                                num:'70',
                                changeNum:'100',
                                type:'100',
                                typeOther:'120',
                                createTime:'150',
                                updateTime:'150',
                                createName:'70',
                                minimum:'70',
                                maximum:'70',
                                safe:'70',
                                nowNum:'100',
                            }
                        let width = key[item.name] ?? '180'
                        if (item.state) {
                            this.tableGroup.push({
                                label: item.name,
                                name: item.chineseName,
                                width
                            })
                        }
                        this.disposeGroup.push({
                            label: item.name,
                            name: item.chineseName,
                            state: item.state
                        })
                    })
                }
            },
            //监视复选框值变化
            handleChangeDiposeGroup(disposeGroup) {
                let configureList = []
                configureList = disposeGroup.map(i => {
                    return {
                        name: i.label,
                        chineseName: i.name,
                        state: i.state
                    }
                })
                this.getProductColumns({
                    type: 'stockMsg',
                    configureList
                }).then(()=>{
                    this.$refs.tableList.updateTable()
                })
            },
            getTotal(total){
                this.tableTotal = total
            },
            //点击查询获取表单数据.
            getFormData(val) {
                val.page = 1
                this.$refs.tableList.getStockMsg(val)
            },
            //导出
            getStockMsgExport() {
                this.$refs.tableList.getTableData(
                    this.formDataList.searchForm,
                    '/stock/stock_msg',
                    '库存收发明细' + new Date().dateFormat('yyyyMMddhhmmss'),
                    1
                )
            },
        },
    }
</script>

<style lang="less" scoped>
    .stockDetail {
        overflow: auto;

        /deep/ th.el-table__cell.gutter {
            background-color: #fafafa;
        }
    }
</style>